<template>
  <el-form class="list" ref="form" :model="form" size="small" label-width="80px">
    <div class="item" v-for="(item, index) in form.list" :key="index">
      <el-form-item label="阈值范围" :prop="'list.' + index + '.min'" :rules="rules.range">
        <el-row>
          <el-col :span="10">
            <el-input-number v-model="item.min" :min="0" :max="1e8" :precision="0" controls-position="right" placeholder="最小值" style="width: 100%" />
          </el-col>
          <el-col :span="4" style="color: #606266; text-align: center">
            <span v-if="index === form.list.length - 1 && isUnlimitMax">≤ X</span>
            <span v-else>≤ X ≤</span>
          </el-col>
          <el-col :span="10" v-if="index === form.list.length - 1">
            <el-tag disable-transitions closable @close="cancelUnlimitMax" v-if="isUnlimitMax">不限最大值</el-tag>
            <div v-else>
              <el-input-number v-model="item.max" :min="0" :max="1e8" :precision="0" controls-position="right" placeholder="最大值" style="width: 100%" />
              <div class="btn-unlimit-max" title="不限最大值" @click="onUnlimitMax">∞</div>
            </div>
          </el-col>
          <el-col :span="10" v-else>
            <el-input-number v-model="item.max" :min="0" :max="1e8" :precision="0" controls-position="right" placeholder="最大值" style="width: 100%" />
          </el-col>
        </el-row>
        <el-button class="close" plain circle size="mini" icon="el-icon-close" @click="form.list.splice(index, 1)" />
      </el-form-item>
      <el-form-item label="严重等级" :prop="'list.' + index + '.level'" :rules="rules.level">
        <el-select v-model="item.level" placeholder="请选择严重等级" default-first-option filterable style="width: 100%">
          <el-option v-for="dict in dict.type.sys_standard_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
    </div>
    <div class="item add" title="增加新项" @click="addItem">
      <el-button plain circle size="mini" icon="el-icon-plus" />
    </div>
  </el-form>
</template>
<script>
// 升级条款
import RdcRuleMixin from './mixin'
export default {
  mixins: [RdcRuleMixin],
  dicts: ['sys_standard_type'],
  data() {
    return {
      initItem: { min: 0, max: 0, level: '' }
    }
  }
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  overflow-x: auto;
  padding-top: 10px;
}
.item {
  width: 330px;
  flex-shrink: 0;
  background-color: #eef1f6;
  border-radius: 8px;
  padding: 10px 15px 0 0;
  + .item {
    margin-left: 10px;
  }
}
.close {
  position: absolute;
  top: -20px;
  right: -20px;
  padding: 3px;
}
.add {
  width: 80px;
  min-height: 80px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-unlimit-max {
  position: absolute;
  z-index: 2;
  top: 2px;
  right: 1px;
  width: 31px;
  height: 29px;
  line-height: 29px;
  background-color: #f5f7fa;
  border-radius: 0 4px 4px 0;
  color: #606266;
  cursor: pointer;
  text-align: center;
  &:hover {
    color: #409eff;
  }
}
</style>
